<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		<div  id="app">
			姓:<input  type="text"   v-model="firstName" /><br />
			名:<input type="text"    v-model="lastName"/><br />
			<span>{{fullName | upper }}</span>
		</div>
		
		
		<script  src="../js/vue.js"></script>
		<script>
			 Vue.filter("upper",value => {
				return value.toUpperCase();
			 })
			
			
			const  app=new  Vue({
				el: "#app",
				data: {
					firstName: '',
					lastName: '',
					fullName: ''
				},
				methods:{
				},
				watch: {
					//监听的是当前的绑定的数据,监听当前对象的数据
					firstName(value){
						this.fullName=value+this.lastName;
					},
					lastName(value){
						this.fullName=value+this.firstName;
					}
				}
				
			})
			
			
		</script>
		
		
		
	</body>
</html>
